<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul,input,textarea{margin: 0; padding:0;}
		textarea{resize:none;overflow: hidden;}
		#ul1{width:300px; height:300px; border:1px solid #000;margin: 30px auto 0;word-break:break-all; word-wrap:break-word;}
		#ul1 div{list-style:none; padding: 2px; border-bottom: 1px dashed #999;overflow: hidden;opacity: 0;filter:alpha(opacity:0);}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oTxt = document.getElementById('txt1');
		var oBtn = document.getElementById('btn1');
		var oUl = document.getElementById('ul1');

		oBtn.onclick = function (){
			var oLi = document.createElement('div');

			oLi.innerHTML = oTxt.value;
			oTxt.value = '';

			if (oUl.children[0]) {
				oUl.insertBefore(oLi, oUl.children[0]);	//括号内位置不要写错了
			} else{
				oUl.appendChild(oLi);
			};

			var iHeight = oLi.offsetHeight;			//动态获取Li高度(先存起来)  ***
			oLi.style.height = 0;
			doMove(oLi, {'height':iHeight}, function(){
				doMove(oLi, {'opacity':100})
			})
		}
	}

	function doMove(obj, json, endFn){
		clearInterval(obj.timer);

		obj.timer = setInterval(function (){
			var bStop = true;
			var iCur = 0;

			for(var attr in json){

				if (attr == 'opacity') {
					iCur = parseInt(parseFloat(getStyle(obj,attr))*100 );
				}else{
					iCur = parseInt(getStyle(obj, attr))
				};

				var iSpeed = (json[attr] - iCur)/8;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed)/100;
					obj.style.fiter = 'alpha(opacity:'+ (iCur + iSpeed) +')';
				}else{
					obj.style[attr] = iCur + iSpeed + 'px';
				};

				if (iCur != json[attr]) {		//极有可能存在一个值到达而其他值没有达到的情况就清除定时器（启下）
					bStop = false;
				}
			}

			if (bStop) {		//(承上)，所以需要在循环外来判断是否全部到达，如果没有，其他值会因为还没有关闭定时器而继续变化
				clearInterval(obj.timer);
				endFn && endFn();
			};
		},30)
	}
	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}

	</script>
</head>
<body>
	<h1>用ul li布局的话会导致在IE7下回有一点点卡顿的情况，解决办法：只需要把ul和li全部换成div便可</h1>
	<textarea id="txt1" rows="10" cols="40"></textarea><br>
	<input id="btn1" type="button" value="发布" />
	<div id="ul1"></div>
</body>
</html>